<template>
  <div>
    <!-- 标签 -->
    <card title="数据列表" btn-text="添加" @btnFn="Fn" />
    <!-- 表格 -->
    <el-table :data="userList" border style="width: 100%">
      <el-table-column align="center" prop="id" label="编号" width="180" />
      <el-table-column align="center" prop="title" label="菜单名称" width="180" />
      <el-table-column align="center" prop="level" label="菜单级别">
        <template #default="{row}">
          {{ row.level==0?'一级':'二级' }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="title" label="前端名称" />
      <el-table-column align="center" prop="icon" label="前端图标">
        <template #default="{row}">
          <i :class="['iconfont','icon-color',row.icon]"></i>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="hidden" label="是否显示">
        <template #default="{row}">
          <el-switch v-model="row.hidden" :active-value="0" :inactive-value="1" @change="switchFn(row,$event)" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="排序" />
      <el-table-column align="center" prop="id" label="设置">
        <template #default="{row}">
            <el-button text @click="ViewFn(row.id)">查看下级</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="id" label="设置操作">
        <template #default="{row}">
            <el-button text @click="router.push({path:'/ums/addMenu',query:{id:row.id}})">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="paginationParams.currentPage4"
      v-model:page-size="paginationParams.pageSize4"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :background="true"
      :total="paginationParams.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import card from "@/components/MyCard/index.vue";
import { useTableFn } from "@/hooks/component/useTable";
import * as http from './api/http';
import { useRoute,useRouter } from "vue-router";
import { reactive, Ref, ref, watch } from "vue";
import { ElMessage } from 'element-plus'
const route=useRoute();
const router=useRouter();
// 列表数据/分页器
let munuList:Ref<IMenuList[]>=ref([])
const ViewFn=(id:number)=>{
  router.push({path:'/ums/menu',query:{pid:id}})
}

let pid:Ref<number>=ref(0)
  pid.value=route.query.pid?Number(route.query.pid):0

let { userList, paginationParams, handleSizeChange, handleCurrentChange,queryList } =
  useTableFn(http.menu.MenuList, {},pid.value);

  watch(()=>route.query,(newVal)=>{
    pid.value=newVal.pid?Number(newVal.pid):0
    queryList(pid.value);
  },{immediate:true})
  // 添加事件
const Fn=(val:any)=>{
    console.log('添加事件',val);
}
const switchFn=async(val:any,event:any)=>{
  console.log('开关事件',val,event);
  let res=await http.menu.MenuUpdateHidden(val.id,{hidden:event})
  console.log(res);
  if(res.code==200){
    ElMessage.success(res.message)
  }else{
    ElMessage.warning(res.message)
  }
  
}
</script>

<style scoped>
  *{
    text-align: center;
  }
  .icon-color{
    color: #666!important;
  }
  :deep(.el-pagination) {
    float: right;
  }
</style>
